<template>
  <div class="main">
    <PureTableBar title="实时监控" class="list_hei">
      <template #buttons>
        <el-button type="primary" @click="newShareVisible = true"> 新建监控任务 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          :data="dataList" :columns="columns" :checkList="checkList" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :pagination="pagination" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type='primary' text @click="getDetailList(row.riskControlStrategyModelId)">
              查看
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
    <div class="show_Echar" v-if="tLoding">
      <div class="echar_main">
        <img :src="gifImage" alt="GIF Image">
        <div class="demo-progress">
          <div style="color:#42516b;text-align: center;">正在识别中</div>
          <el-progress :percentage="progress" :stroke-width="15" striped color="#42516b" />
        </div>
      </div>
    </div>
  </div>

  <ReDialog :width="550" :height="200" :models="newShareVisible" @Closes="cancelnewShareVisible()">
    <template #header>
      <h2 style="text-align: center;">新建监控任务</h2>
    </template>
    <template #main>
      <el-form :model="dataForm" label-width="100px" label-position="right" style="width: 80%; margin: 0 auto">
        <el-form-item label="选择模型：">
          <el-select v-model="dataForm.id" style="width: 100%;">
            <el-option v-for="(item, li) in accessSelectData" :key="item.riskControlStrategyModelId"
              :label="item.policyName" :value="item.riskControlStrategyModelId" />
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addTask()" type="primary"> 确定 </el-button>
        <el-button @click="cancelnewShareVisible()">取消</el-button>
      </span>
    </template>
  </ReDialog>



  <ReDialog :width="1000" :height="600" :models="detailVisible" @Closes="detailVisible = false">
    <template #header>
      <h2 style="text-align: center;">预警信息</h2>
    </template>
    <template #main>
      <el-tabs type="border-card">
        <el-tab-pane label="公司客户">
          <el-scrollbar height="500px">
            <PureTableBar class="list_hei">
              <template v-slot="{ size, checkList }">
                <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" size="small"
                  :data="dataList1" max-height="550" :columns="columns1" :pagination="pagination1" :header-cell-style="{
                    background: 'var(--el-table-row-hover-bg-color)',
                    color: 'var(--el-text-color-primary)'
                  }" @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
                </pure-table>
              </template>
            </PureTableBar>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="零售客户">
          <PureTableBar class="list_hei">
            <template v-slot="{ size, checkList }">
              <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive size="small"
                :data="dataList2" max-height="550" :columns="columns2" :checkList="checkList" :pagination="pagination2"
                :header-cell-style="{
                  background: 'var(--el-table-row-hover-bg-color)',
                  color: 'var(--el-text-color-primary)'
                }" @size-change="handleSizeChange2" @current-change="handleCurrentChange2">
              </pure-table>
            </template>
          </PureTableBar>
        </el-tab-pane>
      </el-tabs>
    </template>
  </ReDialog>
</template>

<script setup lang="ts">
import { PureTableBar } from "@/components/RePureTableBar";
import { useCommon } from "./hook/monitoringAccess";
import { ref } from "vue";
import gifImage from '@/assets/gif/leida.gif';
const shareFrom = ref();
const {
  dataList,
  loading,
  pagination,
  columns,
  newShareVisible,
  copyText,
  newShareFrom,
  copyUrl,
  saveNewShare,
  cancelsaveNewShare,
  GetAllDataListPage,
  handleSizeChange,
  handleCurrentChange,
  accessSelectData,
  dataForm,
  addTask,
  tLoding,
  getDetailList,
  detailVisible,
  dataList1,
  columns1,
  pagination1,
  handleSizeChange1,
  handleCurrentChange1,
  dataList2,
  columns2,
  pagination2,
  handleSizeChange2,
  handleCurrentChange2,
  progress,
  cancelnewShareVisible,
} = useCommon()
</script>
<style lang="scss" scoped>
@import url(@/style/CreditComm.scss);

.main {
  position: relative;
  height: 100%;
}

.show_Echar {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  background-color: black;
  opacity: 0.8;
  top: 0;
  z-index: 10;
  overflow: hidden;

  .echar_main {
    width: 650px;
    height: 490px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
}

.show_Echar img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.demo-progress {
  position: absolute;
  width: 80%;
  bottom: -1%;
  left: 0;
  right: 0;
  margin: auto;
  color: white;
}

// .show_Echar {
//   width: 100%;
//   height: 100%;
//   position: absolute;
//   left: 0;
//   background-color: black;
//   opacity: 0.8;
//   top: 0;
//   z-index: 10;
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   justify-content: center;
// }

// .show_Echar img {
//   margin-bottom: 20px;
// }
</style>
